<HTML><HEAD>
<!--
--------------------------
JavaScript Window Designer
--------------------------
-->
<SCRIPT LANGUAGE="JavaScript"><!-- hide from old browsers
/*
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
*/
// --------------------Hexadecimal Conversion---------------------
// convert a single digit (0 - 16) into hex
function enHex(aDigit)
{
return("0123456789ABCDEF".substring(aDigit, aDigit+1))
}
// convert a hex digit into decimal
function deHex(aDigit)
{
return("0123456789ABCDEF".indexOf(aDigit))
}
// Convert a 24bit number to hex
function toHex(n)
{
return (enHex((0xf00000 & n) >> 20) +
enHex((0x0f0000 & n) >> 16) +
enHex((0x00f000 & n) >> 12) +
enHex((0x000f00 & n) >> 8) +
enHex((0x0000f0 & n) >> 4) +
enHex((0x00000f & n) >> 0))
}
// Convert a six character hex to decimal
function toDecimal(hexNum)
{
var tmp = ""+hexNum.toUpperCase()
while (tmp.length < 6) tmp = "0"+tmp
return ((deHex(tmp.substring(0,1)) << 20) +
(deHex(tmp.substring(1,2)) << 16) +
(deHex(tmp.substring(2,3)) << 12) +
(deHex(tmp.substring(3,4)) << 8) +
(deHex(tmp.substring(4,5)) << 4) +
(deHex(tmp.substring(5,6))))
}
// --------------------JSCcolor Object---------------------
// Returns a JavaScript integer representing a JSCcolor object's color
function rawColor()
{
return (this.red << 16) + (this.green << 8) + this.blue
}
// Returns a hex string representing a JSCcolor object's color
function hexColor()
{
return toHex(this.rawColor())
}
// Set the JSCcolor object's color to that in a hex string.
// This routine does not add the Ox prefix.
function setColor(aString)
{
var tmp = toDecimal(aString)
this.red = (0xff0000 & tmp) >> 16
this.green = (0xff00 & tmp) >> 8
this.blue = (0xff & tmp)
return this
}
// Set the JSCcolor object's color to an integer
function setDecimalColor(aNumber)
{
var tmp = toHex(aNumber)
this.red = eval('0x'+tmp.substring(0,2))
this.green = eval('0x'+tmp.substring(2,4))
this.blue = eval('0x'+tmp.substring(4,8))
return this
}
// Adjust a JSCcolor object's color (red, green or blue) by an offset
function adjustColor(aColor, anOffset)
{
this[aColor] += anOffset
if (this[aColor] > 0xff) this[aColor] = 0xff
if (this[aColor] < 0x0) this[aColor] = 0x0
}
// Adjust one or more of a JSCcolor object's colors by an offset
function adjustColors(colString, anOffset)
{
var cs = colString.toUpperCase()
if (cs.indexOf('R') != -1) this.adjustColor('red', anOffset)
if (cs.indexOf('G') != -1) this.adjustColor('green', anOffset)
if (cs.indexOf('B') != -1) this.adjustColor('blue', anOffset)
}
// JSCcolor object constructor
function JSCcolor(r, g, b)
{
// set properties
this.red = r
this.green = g
this.blue = b
// set methods
this.rawColor = rawColor
this.hexColor = hexColor
this.adjustColor = adjustColor
this.adjustColors = adjustColors
this.setColor = setColor
this.setDecimalColor = setDecimalColor
return this
}
var myColor = new JSCcolor(0x0, 0x0, 0x0)
// Convert arrow presses to actual color changes
function doAdjust(aColor, anOffset)
{
myColor.adjustColor(aColor, anOffset)
parent.JCschemeColor.document.bgColor = myColor.hexColor()
}
// ----------------------- Window Schema ------------------------
// various rules, all of them arbitrary, for setting colors
function color(aType)
{
var base = new JSCcolor(myColor.red, myColor.green, myColor.blue)
if (aType == 'BG')
{
base.red = (base.red + 128) % 256
base.green = (base.green + 128) % 256
base.blue = (base.blue + 128) % 256
}
if (aType == 'Text')
{
var tmp = base.green
base.green = (base.blue + 32) % 256
base.blue = (base.red + 32) % 256
base.red = (tmp + 32) % 256
}
if (aType == 'Left')
{
var tmp = Math.max(base.red, base.blue,base.green)
if (base.red != tmp) base.red = 0x0
if (base.green != tmp) base.green = 0x0
if (base.blue != tmp) base.blue = 0x0
tmp = base.red
base.red = base.blue
base.blue = base.green
base.green = tmp
}
if (aType == 'Right')
{
base.red = (base.red + 32) % 256
base.green = (base.green + 32) % 256
base.blue = (base.blue + 32) % 256
}
if (aType == 'link')
{
var tmp = Math.max(base.red+1, base.blue,base.green)
if ((base.red+1) == tmp) base.adjustColor('red',128); else base.red=0x0
if (base.green == tmp) base.adjustColor('green',128); else base.green=0x0
if (base.blue == tmp) base.adjustColor('blue',128); else base.blue=0x0
}
if (this.scheme == 1) // bright
{
base.adjustColor('red',-32)
base.adjustColor('green',-32)
base.adjustColor('blue',-32)
}
if (this.scheme == 2) // subdued
{
base.adjustColor('red',64)
base.adjustColor('green',64)
base.adjustColor('blue',64)
}
return base.hexColor()
}
// create a header
function header(aString)
{
txt= ""
if (!(this.formality)) txt += '<tt>'
txt += '<b><FONT SIZE=6 '
txt += 'COLOR = '+this.color('Header')+'>'+aString+'</FONT></b>'
if (!(this.formality)) txt += '</tt>'
txt += '<br><br>'
return txt
}
// add text
function text(aString)
{
txt = ""
if (!this.formality) txt += '<tt>'
txt += '<FONT COLOR = '+this.color('Text')+'>'+aString+'</FONT>'
if (!this.formality) txt += '</tt>'
return txt
}
// create a table line
function line(left, right)
{
txt = '<TR><TD ALIGN=RIGHT>'
if (!this.formality) txt += "<TT>"
txt += '<B><FONT COLOR= '
txt += this.color('Left')+">"+left
if (!this.formality) txt += "</TT>"
txt += "</FONT></B></TD><TD ALIGN=LEFT><FONT COLOR= "
txt += this.color('Right')+">"
if (!this.formality) txt += "<TT>"
txt += right
if (!this.formality) txt += "</TT>"
txt += "</FONT></TD></TR>"
return txt
}
// Create the body call
function body()
{
txt = "<BODY BGCOLOR= "+this.color('BG')+" "
txt += "link = "+this.color('link')+" "
txt += "vlink = "+this.color('link')+">"
if (this.expression) txt+='<FONT SIZE=3>'; else txt+='<FONT SIZE=4>'
return txt
}
// Go ahead and build the window
function buildWindow()
{
this.formality = (document.forms[0].formality.options.selectedIndex == 0)
this.expression = (document.forms[0].expression.options.selectedIndex == 0)
this.scheme = document.forms[0].scheme.options.selectedIndex
parent.JCscheme.document.open()
parent.JCscheme.document.write(this.body())
parent.JCscheme.document.write(this.header('Sample Document'))
parent.JCscheme.document.write(this.text(
'She had read several nice little histories about children '+
'who had got burnt, and eaten up by wild beasts and other '+
'unpleasant things, all because they WOULD not remember the '+
'simple '))
parent.JCscheme.document.write('<A HREF="#">Rules</A>')
parent.JCscheme.document.write(this.text(
' their friends had taught them.'))
parent.JCscheme.document.write('<BR><BR><TABLE BORDER=2>')
parent.JCscheme.document.write(this.line('A Red-Hot Poker',
'It will burn you if your hold it too long'))
parent.JCscheme.document.write(this.line('Cutting your Finger',
'If you cut finger VERY deeply with a knife, it usually bleeds'))
parent.JCscheme.document.write(this.line('Bottles marked Poison',
'It is almost certain to disagree with you, sooner or later'))
parent.JCscheme.document.write('</TABLE>')
parent.JCscheme.document.close()
}
// An object to store our preferences
function JSCscheme()
{
this.formality = true
this.expression = true
this.scheme = 0
this.color = color
this.body = body
this.text = text
this.line = line
this.header = header
this.buildWindow = buildWindow
}
var myScheme=new JSCscheme()
<!-- done hiding --></SCRIPT></HEAD>
<BODY bgcolor="ffffff" link="0000ff" vlink="770077">
<H1><FONT COLOR="007777"><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = RIGHT>Window Colors</FONT></H1>
<FONT SIZE=4>
<FONT COLOR="770000"><b>Play with Color Schemes.</b></FONT>
This script lets you play with document colors and styles.
It uses fairly inept rules to pick hues from your base color
but it provides a good demonstration of creating documents on
the fly using various color schemes.
<FORM>
<INPUT TYPE="BUTTON" VALUE="TRY SCHEME"
onClick="myScheme.buildWindow()"><p>
Formality:
<SELECT NAME="formality" SIZE="1">
<OPTION>Formal
<OPTION>Informal
</SELECT><br>
Expression:
<SELECT NAME="expression" SIZE="1">
<OPTION>Constrained
<OPTION>Free
</SELECT><br>
ColorScheme:
<SELECT NAME="scheme" SIZE="1">
<OPTION>Normal
<OPTION>Bright
<OPTION>Subdued
</SELECT><p>
Base Color:
<IMG SRC="../GRAFX/ARROWS.GIF" width=164
height=101 usemap="#map" border=0><MAP name="map">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', 0x10)" COORDS="116, 3, 153,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', 0x01)" COORDS="116,28, 153,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', -0x01)" COORDS="116,48, 153,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('blue', -0x10)" COORDS="116,70, 153,97">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', 0x10)" COORDS="62, 3, 97,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', 0x01)" COORDS="62,28, 97,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', -0x01)" COORDS="62,48, 97,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('green', -0x10)" COORDS="62,70, 97,97">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', 0x10)" COORDS="10, 3, 44,27">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', 0x01)" COORDS="10,28, 44,47">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', -0x01)" COORDS="10,48, 44,69">
<AREA SHAPE=rect HREF="javascript:doAdjust('red', -0x10)" COORDS="10,70, 44,97">
</MAP>
</FORM>
</FONT>
<h5>"Alice In Wonderland" quote courtesy of the Gutenberg Project.
Copyright ©1996 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>